<template>
  <div>
    <div class="containera">
      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item
          label="用户名"
          prop="userName"
          :rules="[
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ]"
        >
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="email"
          :rules="[
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ]"
        >
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :rules="[
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ]"
        >
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          prop="checkPassword"
          :rules="[
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ]"
        >
          <el-input v-model="form.checkPassword"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="13">
            <el-form-item
              label="验证码"
              prop="yzm"
              :rules="[
                { required: true, message: '请输入用户名', trigger: 'blur' },
              ]"
            >
              <el-input v-model="form.yzm"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button @click="handlerSendEmail" :loading="load"
                >发送验证码</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sendEmail } from "../api/email.js";
export default {
  name: "FindPassword",
  data() {
    //选项 / 数据
    return {
      load: false,
      form: {
        password: "",
        checkPassword: "",
        userName: "",
        email: "",
        yzm: "",
      },
    };
  },
  methods: {
    handlerSendEmail() {
      this.load = true;
      console.log(this.load);
      const query = {
        email: this.email,
      };
      // sendEmail(query).then(response =>{
      //     console.log(query)
      // })
    },
  },

  created() {
    //生命周期函数
  },
  mounted() {},
};
</script>

<style>
.containera {
  align-items: center;
  /* background-color: var(--white); */
  /* background: url("https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg"); */
  /* background: url(../../static/img/background.jpg); */
  /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。 */
  /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */
  background-color: rgb(255, 255, 255);
  /* background-attachment: fixed; */
  /* background-position: center; */
  background-repeat: no-repeat;
  /* background-size: cover; */
  display: grid;
  height: 100vh;
  place-items: center;
}
</style>
